VS Code'i laienduste arendamise meisterklass: põhjalik juhend globaalsetele arendajatele

Visual Studio Code'ist (VS Code) on saanud miljonite arendajate eelistatuim koodiredaktor üle maailma. Selle populaarsus tuleneb selle kergusest, võimsatest funktsioonidest ja, mis kõige tähtsam, laiendatavusest. Võimalus luua kohandatud laiendusi lubab arendajatel redaktorit oma spetsiifilistele vajadustele kohandada, suurendades produktiivsust ja optimeerides töövooge. See põhjalik juhend juhatab teid läbi oma VS Code'i laienduste loomise protsessi, alates esialgsest seadistamisest kuni oma loomingu avaldamiseni maailmale.

Miks arendada VS Code'i laiendusi?

VS Code'i laienduste arendamine pakub mitmeid eeliseid nii üksikutele arendajatele kui ka organisatsioonidele:

• Isikupärastatud töövoog: Kohandage redaktorit, et see sobiks ideaalselt teie kodeerimisstiili ja projekti nõuetega.
• Suurenenud produktiivsus: Automatiseerige korduvaid ülesandeid, integreerige väliste tööriistadega ja optimeerige oma arendusprotsessi.
• Parendatud koostöö: Jagage laiendusi oma meeskonna või laiema kogukonnaga, et standardiseerida töövooge ja parandada koodi kvaliteeti.
• Õppimine ja oskuste arendamine: Kogemuste omandamine TypeScripti, Node.js-i ja VS Code API-ga avab uusi karjäärivõimalusi.
• Panus kogukonda: Jagage oma uuenduslikke lahendusi globaalse arendajate kogukonnaga ja panustage ökosüsteemi.

Eeltingimused

Enne laienduste arendamisega alustamist veenduge, et teil on installitud järgmine:

• Node.js ja npm (Node Package Manager): VS Code'i laienduste arendus tugineb suuresti Node.js-ile. Laadige alla ja installige uusim LTS-versioon ametlikult Node.js-i veebisaidilt. npm installitakse automaatselt koos Node.js-iga.
• Visual Studio Code: Veenduge, et teil on installitud VS Code'i uusim versioon.
• Yeoman ja VS Code Extension Generator: Yeoman on karkassi loomise tööriist, mis lihtsustab laienduste loomise protsessi. Installige see globaalselt, kasutades npm-i:

            npm install -g yo generator-code
            

              
                Copy
              
            
          

Arenduskeskkonna seadistamine

Kui eeltingimused on täidetud, olete valmis oma arenduskeskkonda seadistama:

1. Looge uus laiendusprojekt: Avage oma terminal ja käivitage laiendusgeneraatori alustamiseks järgmine käsk:

            yo code
            

              
                Copy
              
            
          

2. Vastake küsimustele: Generaator esitab rea küsimusi teie laienduse kohta. Siin on ülevaade levinumatest küsimustest ja soovitatavatest vastustest:
   • Mis tüüpi laienduse soovite luua? Valige TypeScriptil põhineva laienduse jaoks "New Extension (TypeScript)", mis on soovitatav lähenemine.
   • Mis on teie laienduse nimi? Valige oma laiendusele kirjeldav ja unikaalne nimi. Näited: "Code Spell Checker," "JavaScript Snippets," "Python Autocomplete."
   • Mis on teie laienduse identifikaator? See on teie laienduse unikaalne identifikaator, tavaliselt formaadis `väljaandja.laienduse-nimi`. Valige väljaandja nimi (nt teie GitHubi kasutajanimi või ettevõtte nimi).
   • Mis on teie laienduse kirjeldus? Esitage lühike ja informatiivne kirjeldus selle kohta, mida teie laiendus teeb.
   • Kas initsialiseerida Git'i repositoorium? Valige "Jah", et initsialiseerida Git'i repositoorium versioonihalduseks.
   • Kas soovite koodi lintimiseks kasutada eslinti? Valige "Jah", et tagada koodistiili järjepidevus.
3. Avage projekt VS Code'is: Kui generaator on lõpetanud, avage äsja loodud projekti kaust VS Code'is.

Projekti struktuuri mõistmine

Laiendusgeneraator loob põhilise projektistruktuuri järgmiste võtmefailidega:

• `package.json`: See fail sisaldab teie laienduse metaandmeid, sealhulgas selle nime, versiooni, kirjeldust, sõltuvusi ja aktiveerimissündmusi.
• `tsconfig.json`: See fail konfigureerib TypeScripti kompilaatorit.
• `.vscode/launch.json`: See fail konfigureerib teie laienduse silurit.
• `src/extension.ts`: See on teie laienduse peamine sisendpunkt. See sisaldab funktsioone `activate` ja `deactivate`.
• `README.md`: Markdown-fail, mis sisaldab teie laienduse kirjeldust, kasutusjuhendit ja muud asjakohast teavet.

Esimese laienduse kirjutamine

Alustame lihtsa laienduse loomisega, mis kuvab käsu täitmisel teate "Hello World":

1. Avage `src/extension.ts`: See fail sisaldab funktsiooni `activate`, mis käivitatakse teie laienduse aktiveerimisel.
2. Muutke funktsiooni `activate`: Asendage olemasolev kood järgmisega:

            import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Õnnitleme, teie laiendus \"my-extension\" on nüüd aktiivne!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Tere maailm minu laiendusest!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
            

              
                Copy
              
            
          

3. Selgitus:
   • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registreerib käsu ID-ga `my-extension.helloWorld`. See käsk on saadaval VS Code'i käsupaletis.
   • `vscode.window.showInformationMessage('Tere maailm minu laiendusest!')`: Kuvab VS Code'i aknas infoteate.
   • `context.subscriptions.push(disposable)`: Lisab käsu laienduse tellimustele, tagades selle korrektse eemaldamise laienduse deaktiveerimisel.
4. Muutke faili `package.json`: Lisage käsu defineerimiseks järgmine kood jaotisesse `contributes`:

            "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Tere maailm"
		}]
	}
            

              
                Copy
              
            
          

5. Selgitus:
   • `"commands"`: Määratleb käsud, mida teie laiendus pakub.
   • `"command": "my-extension.helloWorld"`: Määrab käsu ID, mis vastab `extension.ts`-is kasutatud ID-le.
   • `"title": "Tere maailm"`: Määrab käsu kuvatava nime käsupaletis.

Laienduse testimine

Nüüd on aeg oma laiendust testida:

1. Vajutage F5: See käivitab uue VS Code'i akna, kuhu on installitud teie laiendus. See on "Extension Development Host".
2. Avage käsupalett: Vajutage `Ctrl+Shift+P` (või `Cmd+Shift+P` macOS-is), et avada käsupalett.
3. Sisestage "Tere maailm": Peaksite nägema oma käsku käsupaletis.
4. Valige "Tere maailm": Käsul klõpsamine käivitab selle ja kuvab VS Code'i aknas teate "Tere maailm minu laiendusest!".

Laienduse silumine

Silumine on ülioluline vigade tuvastamiseks ja parandamiseks teie laienduses. VS Code pakub suurepärast silumistuge:

1. Määrake katkestuspunkte: Klõpsake koodiredaktori servas reanumbrite kõrval, et oma koodi katkestuspunkte seada.
2. Vajutage F5: See käivitab Extension Development Host'i silumisrežiimis.
3. Käivitage oma laiendus: Täitke käsk või tegevus, mis käivitab koodi, mida soovite siluda.
4. Uurige muutujaid ja kutsepinut: VS Code'i silur peatab täitmise teie katkestuspunktides, võimaldades teil uurida muutujaid, samm-sammult koodi läbida ja kutsepinut (call stack) uurida.

Töötamine VS Code API-ga

VS Code API pakub rikkalikku valikut liideseid ja funktsioone redaktoriga suhtlemiseks. Siin on mõned API võtmevaldkonnad:

• `vscode.window`: VS Code'i aknaga suhtlemiseks, teadete kuvamiseks, sisestuskastide näitamiseks ja paneelide haldamiseks.
• `vscode.workspace`: Tööruumile juurdepääsemiseks ja sellega manipuleerimiseks, sealhulgas failid, kaustad ja konfiguratsioonisätted.
• `vscode.commands`: Käskude registreerimiseks ja täitmiseks.
• `vscode.languages`: Keeletoe pakkumiseks, näiteks süntaksi esiletõstmine, koodi lõpetamine ja diagnostika.
• `vscode.debug`: Siluriga suhtlemiseks.
• `vscode.scm`: Lähtekoodihalduse süsteemidega (nagu Git) suhtlemiseks.

Näide: Koodilõigu laienduse loomine

Loome laienduse, mis lisab koodilõigu lihtsa Reacti komponendi loomiseks:

1. Looge kaust `snippets`: Looge oma projekti juurkausta uus kaust nimega `snippets`.
2. Looge koodilõigu fail: Looge kausta `snippets` fail nimega `react.json`.
3. Lisage koodilõigu definitsioon: Lisage `react.json` faili järgmine JSON:

            {
	"Reacti komponent": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
\n\t\t\t${2:Content}\n\t\t
\n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Loob lihtsa Reacti komponendi"
	}
}
            

              
                Copy
              
            
          

4. Selgitus:
   • `"Reacti komponent"`: Koodilõigu nimi.
   • `"prefix": "reactcomp"`: Prefiks, mis käivitab koodilõigu. Sisestades `reactcomp` ja vajutades `Tab`, lisatakse koodilõik.
   • `"body"`: Stringide massiiv, mis esindab koodilõigu ridu.
   • `${1:ComponentName}`: Tabulaatoripeatus, mis võimaldab teil kiiresti komponendi nime muuta.
   • `"description"`: Koodilõigu kirjeldus.
5. Muutke faili `package.json`: Lisage jaotisesse `contributes` järgmine:

            "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
            

              
                Copy
              
            
          

6. Selgitus:
   • `"snippets"`: Määratleb koodilõigud, mida teie laiendus pakub.
   • `"language": "javascriptreact"`: Määrab keele, millele koodilõik on kohaldatav.
   • `"path": "./snippets/react.json"`: Määrab tee koodilõigu failini.
7. Testige oma koodilõiku: Avage `.jsx` või `.tsx` fail ja sisestage `reactcomp`. Vajutage `Tab`, et koodilõik lisada.

Laienduste arendamise edasijõudnute tehnikad

Kui olete põhitõed omandanud, saate uurida edasijõudnumaid laienduste arendamise tehnikaid:

• Language Server Protocol (LSP): Kasutage LSP-d, et pakkuda täiustatud keeletuge, näiteks koodi lõpetamist, diagnostikat ja refaktoorimist, konkreetse keele jaoks. Populaarsed LSP implementatsioonid hõlmavad Pythonit, Java ja Go'd.
• Silumisadapterid: Looge kohandatud silumisadaptereid, et toetada teatud programmeerimiskeelte või käituskeskkondade silumist.
• Webviews: Manustage interaktiivseid veebipõhiseid kasutajaliideseid VS Code'i sisse, kasutades webview'sid. See võimaldab teil luua keerukaid ja visuaalselt atraktiivseid laiendusi.
• Teemad: Looge kohandatud teemasid, et muuta VS Code'i välimust. Paljud populaarsed teemad on saadaval VS Code'i turuplatsil.
• Klahvikombinatsioonid: Määratlege kohandatud klahvikombinatsioonid, et siduda kindlaid tegevusi kiirklahvidega.

Internatsionaliseerimine ja lokaliseerimine (i18n ja L10n)

Globaalsele publikule jõudmiseks kaaluge oma laienduse internatsionaliseerimist ja lokaliseerimist. See hõlmab laienduse kohandamist erinevate keelte ja piirkondade toetamiseks.

• Eraldage tekstistringid: Viige kõik kasutajale suunatud tekstistringid eraldi ressursifailidesse.
• Kasutage VS Code'i i18n API-t: VS Code pakub API-t lokaliseeritud stringide laadimiseks vastavalt kasutaja lokaadile.
• Toetage mitut keelt: Pakkuge ressursifaile erinevate keelte jaoks.
• Arvestage paremalt-vasakule (RTL) paigutusega: Kui teie laiendus kuvab teksti, veenduge, et see toetab RTL-keeli nagu araabia ja heebrea keel.

Laienduse avaldamine

Kui teie laiendus on valmis, saate selle avaldada VS Code'i turuplatsil, et teised saaksid seda kasutada:

1. Looge Azure DevOps organisatsioon: Oma laienduse avaldamiseks vajate Azure DevOps organisatsiooni. Kui teil seda pole, looge tasuta konto Azure DevOps veebisaidil.
2. Installige tööriist `vsce`: VS Code Extension Manager (`vsce`) on käsurea tööriist laienduste pakendamiseks ja avaldamiseks. Installige see globaalselt, kasutades npm-i:

            npm install -g vsce
            

              
                Copy
              
            
          

3. Looge väljaandja: Väljaandja on identiteet, mis omab teie laiendusi turuplatsil. Looge väljaandja käsuga `vsce create-publisher`. Peate sisestama väljaandja nime ja isikliku juurdepääsuloa (PAT) Azure DevOps'ist.
4. Genereerige isiklik juurdepääsuluba (PAT): Minge Azure DevOps'is "User Settings" -> "Personal Access Tokens" ja looge uus PAT ulatusega "Marketplace (Publish)".
5. Pakendage oma laiendus: Kasutage käsku `vsce package`, et pakendada oma laiendus `.vsix` failiks.
6. Avaldage oma laiendus: Kasutage käsku `vsce publish`, et oma laiendus turuplatsil avaldada. Peate sisestama oma väljaandja nime ja PAT-i.

Laienduste arendamise parimad tavad

Järgige neid parimaid tavasid, et luua kvaliteetseid ja hooldatavaid VS Code'i laiendusi:

• Kasutage TypeScripti: TypeScript pakub staatilist tüüpimist ja parandab koodi hooldatavust.
• Kirjutage ühikteste: Kirjutage ühikteste, et tagada oma laienduse korrektne toimimine.
• Kasutage linterit: Kasutage linterit nagu ESLint, et tagada koodistiili järjepidevus.
• Dokumenteerige oma kood: Kirjutage oma laiendusele selge ja lühike dokumentatsioon.
• Käsitlege vigu sujuvalt: Rakendage korrektne veakäsitlus, et vältida oma laienduse kokkujooksmist.
• Optimeerige jõudlust: Optimeerige oma laienduse jõudlust, et vältida VS Code'i aeglustumist.
• Järgige VS Code API juhiseid: Järgige VS Code API juhiseid, et tagada oma laienduse hea integreerumine redaktoriga.
• Mõelge ligipääsetavusele: Muutke oma laiendus ligipääsetavaks puuetega kasutajatele.

Kogukonna ressursid

Siin on mõned väärtuslikud ressursid VS Code'i laienduste arendamise kohta lisateabe saamiseks:

• VS Code'i laienduste API dokumentatsioon: Ametlik dokumentatsioon VS Code'i laienduste API jaoks.
• VS Code'i laienduste näidised: Kogumik näidislaiendusi, mis demonstreerivad API erinevaid funktsioone.
• VS Code'i turuplats: Sirvige VS Code'i turuplatsi, et leida olemasolevaid laiendusi ja õppida nende koodist.
• Stack Overflow: Esitage küsimusi ja leidke vastuseid, mis on seotud VS Code'i laienduste arendamisega.
• GitHub: Uurige avatud lähtekoodiga VS Code'i laiendusi ja panustage kogukonda.

Kokkuvõte

VS Code'i laienduste arendamine on võimas viis oma kodeerimiskeskkonna kohandamiseks, produktiivsuse suurendamiseks ja oma lahenduste jagamiseks globaalse arendajate kogukonnaga. Järgides seda põhjalikku juhendit, saate omandada laienduste arendamise kunsti ja luua uuenduslikke tööriistu, mis parandavad VS Code'i kogemust nii teile endale kui ka teistele. Ärge unustage omaks võtta kogukonda, panustada avatud lähtekoodiga projektidesse ning pidevalt õppida ja avastada VS Code'i laienduste arendamise pidevalt arenevat maailma. Edu ja head kodeerimist!